@charset "utf-8";

@function r($px) {
    @return($px/40) *1rem;
}

@function px($px) {
    @return($px/2) * 1px;
}
.ib{
    display: inline-block;
    width: r(95);
}
#web{
     width: r(750);
    height: 100%;
    position: relative;
    padding-right: r(23);
    padding-left: r(23);
    box-sizing: border-box;
}

header{
    width: 100%;
    height: 62px;
    padding-top: 22px;
    .back{
    display: inline-block;
    width: 59px;
    height: 26px;
    border: 3px solid #ff9344;
    border-radius: 25px;
    text-align: center;
    vertical-align: middle;
    font-size: 21px;
     }
    .xinxi{
        margin-top: -10px;
        img{
            width: 100%;
        }
    }
    .title{
        font-size: 13px;
        text-align: center;
        margin-top: 8px;
    }
}


footer {
    width: r(750);
    height: px(136);
    position: absolute;
    left: 0;
    bottom: 0;
    li {
        width: 25%;
        text-align: center;
        .iconfont{
           font-size: r(72);
           color: white;
           -webkit-text-stroke: 1px #FF9344;

        }
        .wz26{
            font-size: r(26);
            color: black;
        }
    }
    
        .wode{
            .iconfont{
            color: #ff9344;
            }
        }
}
.session{ 
    position: absolute;
    top: 75px;
    bottom: px(136);
    left: r(23);
    right: r(23);
    
    //纵向滚动
    overflow-y: scroll;
    //弹性滚动
    -webkit-overflow-scrolling: touch;
   .gd1{
    
    .gd1-1{
        img{
            width: r(169);
        }
    }
    .gd1-2{
        margin-left: r(24);
    }
    .gd1-3{
        margin-top: r(60);
        img{
            width: r(41);
        }
    }
    .wz30{
        font-size: r(30);
        margin-top: r(33);
    }
    .wz26{
        font-size: r(26);
        color: #9d9d9d;
        margin-top: r(37);
    }
}
   .gd2{
    width: 100%;
    height: r(209);
    
    .cfx1{
        width: r(194);
        height: r(149);
        background: #b2e0a0;
        text-align: center;
        img{
            margin-top: r(20);
            width: r(77);
        }
        p{
            font-size: r(26);
        }
    }
    .cfx2{
        width: r(194);
        height: r(149);
        background: #a0dce0;
        text-align: center;
        margin-left: r(30);
        margin-right: r(30);
        img{
            margin-top: r(20);
            width: r(83);
        }
        p{
            font-size: r(26);
        }
    }
    .cfx3{
        width: r(194);
        height: r(149);
        background: #e0b7a0;
        text-align: center;
        img{
            margin-top: r(20);
            width: r(124);
        }
        p{
            font-size: r(26);
        }
    }
}
   .gd3{
       .gd3-1{
           img{
            width: r(57); 
           }
       }
       .gd3-2{
           img{
               width: r(25);
           }
       }
       .qb{
           vertical-align: middle;
       }
       .gd{
           vertical-align: middle;
       }
    .wz26{
        font-size: r(26);
        vertical-align: middle;
    }
    .wz24{
        font-size: r(24);
        vertical-align: middle;
    }
   }
   .gd4{
       margin-top: r(24);
       .gd4-1{
           img{
            width: r(70); 
           }
       }
       .gd4-2{
           img{
               width: r(25);
           }
       }
       .ddping{
           vertical-align: middle;
       }
       .gd{
           vertical-align: middle;
       }
    .wz26{
        font-size: r(26);
        vertical-align: middle;
    }
    .wz24{
        font-size: r(24);
        vertical-align: middle;
    }
   }
   .gd5{
       margin-top: r(34);
       .gd5-1{
           img{
            width: r(93); 
           }
       }
       .gd5-2{
           img{
               width: r(25);
           }
       }
       .zhy{
           vertical-align: middle;
       }
       .gd{
           vertical-align: middle;
       }
    .wz26{
        font-size: r(26);
        vertical-align: middle;
    }
    .wz24{
        font-size: r(24);
        vertical-align: middle;
    }
   }
   .gd6{
       margin-top: r(42);
       .gd6-1{
           img{
            width: r(58); 
           }
       }
       .gd6-2{
           img{
               width: r(25);
           }
       }
       .zuji{
           vertical-align: middle;
       }
       .gd{
           vertical-align: middle;
       }
    .wz26{
        font-size: r(26);
        vertical-align: middle;
    }
    .wz24{
        font-size: r(24);
        vertical-align: middle;
    }
   }
   .sy79{
       margin-top: r(79);
   }
   .gd7{
       .gd7-1{
           img{
            width: r(77); 
           }
       }
       .gd7-2{
           img{
               width: r(25);
           }
       }
       .sz{
           vertical-align: middle;
       }
       .gd{
           vertical-align: middle;
       }
    .wz26{
        font-size: r(26);
        vertical-align: middle;
    }
    .wz24{
        font-size: r(24);
        vertical-align: middle;
    }
   }
   .gd8{
       margin-top: r(24);
       .gd8-1{
           img{
            width: r(82); 
           }
       }
       .gd8-2{
           img{
               width: r(25);
           }
       }
       .lx{
           vertical-align: middle;
       }
       .gd{
           vertical-align: middle;
       }
    .wz26{
        font-size: r(26);
        vertical-align: middle;
    }
    .wz24{
        font-size: r(24);
        vertical-align: middle;
    }
   }
   .tczh{
       margin-top: r(70);
       margin: r(27);
   }
   .tc{
       display: inline-block;
       width: r(175);
       height: r(75);
       border-radius: 25px;
       background: #ff9344;
       text-align: center;
       font-size: r(24);
       color: white;
       line-height: r(75);
       margin-left: r(86);
   }
   .zx{
       display: inline-block;
       width: r(175);
       height: r(75);
       background: #ff9344;
       border-radius: 25px;
       text-align: center;
       font-size: r(24);
       color: white;
       line-height: r(75);
       margin-left: r(130);
   }
}